<template>
  <div class="chart-container">
    <v-chart :options="options" :autoresize="true" />
  </div>
</template>

<style>
/**
   * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
   * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
   */
.echarts {
  width: 100%;
  height: 100%;
  min-height: 50px;
}
.chart-container {
  width: 100%;
  height: 100%;
}
</style>

<script>
import ECharts from "vue-echarts";
import "echarts";
export default {
  name: "ChartBase",
  components: {
    "v-chart": ECharts,
  },
  props: {
    title: {
      type: String,
      require: false,
      default: "",
    },
    datasetSource: {
      type: Array,
      require: true,
    },
    type: {
      type: String,
      require: true,
    },
    typeOptions: {
      type: String,
      require: false,
    },
  },
  data() {
    const options = {
      title: {
        text: this.title,
      },
      tooltip: {
        trigger: "item",
      },
      animationDuration: 1000,
      dataset: {
        source: this.datasetSource,
      },
    };
    if (this.type === "line" || this.type == "bar") {
      options.xAxis = { type: "category" };
      options.yAxis = {
        type: "value",
      };
      options.series = this.datasetSource
        .filter((item, index) => index > 0)
        .map(() => {
          return { type: this.type };
        });
    } else if (this.type === "pie") {
      console.log("pie");
    }
    return {
      options,
    };
  },
  mounted() {
    console.log(this.options);
  },
};
</script>
